<template>
	<view>
		<view class="status_bar"></view>
		<view class="top">
			<view class="example-body">
					<uni-search-bar radius="100" @input="zhizhi" placeholder="搜索" :value="zhi" clearButton="always"
						bgColor="white" cancelButton="always" @confirm="shoppinginput" @cancel="cancel" />
			</view>
		</view>
		<view class="history" v-show="history">
			<view class="history_title">
				<text>历史搜索</text>
				<image src="../../components/common-search/icon_delete.png" mode="widthFix" style="width:5%;"
					@click="cleanhistory"></image>
			</view>
			<view class="history_text">
				<text v-for="(item,idx) in newArray" :key="idx" @click="textfz(item)">{{item}}</text>
			</view>
		</view>
		
		<view class="swiper_con" v-show="shoppinglist">
			<view class="mnajdan"><text>全部</text></view>
			<view class='swiper_con_view' v-for="(item,index) in shoopingarray" :key="index" v-if='item.status=="1"?true:false'>
				<view class="usimg">
					<image src="../../static/logo.png" mode="widthFix"></image>
				</view>
				<view class="usname">{{item.title}}</view>
			</view>
			<!-- <view class="lookmore"> 查看更多</view> -->
		</view>
		<view class="none" v-show="noneview">
			<image src="../../static/none_search.png" mode="widthFix" style="width:20%"></image>
			<text>抱歉,这里什么都没有！</text>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				zhi: '',
				shoopingtext: "", //搜索框的值
				history: false, //显示历史记录
				noneview: false, //显示未找到提示
				shoppinglist: false, //显示商品列表
				historyArray: [], //历史记录数组,
				newArray: [], //添加历史记录数组
				shoopingarray: [{ //商品
						id: 0,
						images: "../../static/tabbarimg/appiconpic.png",
						title: "OA...",
						status: 0
					},
					{
						id: 1,
						images: "../../static/tabbarimg/appiconpic.png",
						title: "nc...",
						status: 0
					}
				]
			}
		},
		methods: {
			// 取消
			cancel() {
				uni.navigateBack({
					delta: 1
				})
			},
			//清除历史记录
			cleanhistory() {
				uni.showToast({
					title: '清楚成功',
					icon: 'success'
				})
				this.history = false, //隐藏历史记录
					this.historyArray = [], //清空历史记录数组
					this.newArray = []
			},

			//搜索
			zhizhi(e) {
				console.log(e)
				//当删除input的值为空时
				if (this.zhi == "") {
					this.history = true, //显示历史记录
						this.noneview = false,
						this.shoppinglist = false //隐藏商品列表
					//所有商品列表的状态改为0
					for (var index in this.shoopingarray) {
						let temp = 'shoopingarray[' + index + '].status';
						temp = 0
					}
				} else {
					this.history = false
				}
				this.shoopingtext = e.value
			},
			//搜索框的值
			shoppinginput(e) {
				this.shoopingtext = e.value//搜索框的值
				console.log(this.shoopingtext)
				var sss = true;
				if (this.shoopingtext != "") {
					//将搜索框的值赋给历史数组
					this.historyArray.push(this.shoopingtext);
					//模糊查询 循环查询数组中的title字段
					for (var index in this.shoopingarray) {
						var num = this.shoopingarray[index].title.indexOf(this.shoopingtext);
						let temp = 'shoopingarray[' + index + '].status';
						console.log(num)
						if (num != -1) { //不匹配的不显示
							temp = 1,
							sss = false //隐藏未找到提示
						}
					}
					this.history = false, //隐藏历史记录
					this.noneview = sss, //隐藏未找到提示
					this.shoppinglist = true, //显示商品列表
					this.newArray = this.historyArray //给新历史记录数组赋值
				} else {
					this.shoppinglist = false, //隐藏商品列表
					this.noneview = true, //显示未找到提示
					this.history = false //隐藏历史记录
				}
			},

			//点击历史记录赋值给搜索框
			textfz(item) {
				console.log(item)
				this.shoopingtext = item
			},
		},
	}
</script>
<style lang="scss">
	page {
		background-color: #EFEFF4;
	}
	.example-body {
		display: block;
		padding: 10px;
		background-color: white;
	}
	.top {
		width: 100%;
		background-color: white;
	}

	.history {
		background-color: white;
		padding: 4%;
	}

	.history_title {
		font-size: 30rpx;
		display: flex;
		justify-content: space-between;
		color: #a8a7a7fa;
		align-items: center;
	}

	.history_text {
		padding: 4% 0;
		display: flex;
		flex-wrap: wrap;
	}

	.history_text>text {
		background-color: #E5E5EA;
		padding: 1% 3%;
		margin: 2%;
		border-radius: 40rpx;
		font-size: 30rpx;
	}

	.history_text>text:first-child {
		margin-left: 0;
	}

	.none {
		margin-top: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		text {
			margin-top: 10%;
			color: #1F85EC;
		}
	}

	.swiper_con {
		background-color: white;
		.mnajdan{
			padding: 20rpx 40rpx;
			
			border-bottom: 1rpx solid #EFEFF4;
			text{
				padding:20rpx 0;
				font-weight: 600;
				color: #1F85EC;
				border-bottom: 4rpx solid #1F85EC;
				font-size: 34rpx;
			}
		}
		.lookmore{
			color: #1F85EC;
			font-size: 30rpx;
			text-align: center;
			padding: 20rpx;
		}
	}

	.swiper_con_view {
		// border-top: 1rpx solid #EFEFF4;
		border-bottom: 1rpx solid #EFEFF4;
		display: flex;
		padding: 20rpx 40rpx;

		.usimg {
				width: 80rpx;
				height: 80rpx;
			image {
				
				width: 80rpx;
				height: 80rpx;
			border-radius: 50%;
			}
		}

		.usname {
			// color: red;
			font-weight: 600;
			line-height: 80rpx;
			margin-left: 50rpx;
			font-size: 32rpx;
			// height: 70rpx;
		}
	}
</style>
